import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hixing_app/assets/r_img.dart';
import 'package:hixing_app/utils/export_utils.dart';
import 'package:hixing_app/widgets/toast/toast.dart';
import 'package:hixing_app/views/test_view/canvas_utils.dart';
import 'package:hixing_app/views/test_view/reset_test_matrix4/model/action_picture.dart';
import 'package:hixing_app/views/test_view/reset_test_matrix4/model/matrix4_data_model.dart';
import 'package:hixing_app/views/test_view/reset_test_matrix4/model/matrix_compose_model.dart';
import 'package:hixing_app/views/test_view/test_matrix4/rect_element_model.dart';
import 'package:hixing_app/views/test_view/test_matrix4/transform_vertex_model.dart';
import 'dart:math' as math;
import 'package:flutter_svg/flutter_svg.dart' as svg;
import 'package:vector_math/vector_math_64.dart' as vector;

enum OperatingType {
  /// 单个
  single,

  /// 合成
  compose
}

class OperatingNotifier extends ChangeNotifier {
  /// action 图片list
  final List<ActionPicture> _actionPictureList = [];

  /// get action 图片list
  List<ActionPicture> get actionPictureList => _actionPictureList;

  /// 合成数据结构
  MatrixComposeModel? _composeData;

  /// get 合成数据结构
  MatrixComposeModel? get composeData => _composeData;

  /// 当前操作的类型
  OperatingType operatingType = OperatingType.single;

  bool get isComposeOperate => operatingType == OperatingType.compose;

  /// 获取当前正在操作的action picture
  ActionPicture? get currentActionPic => isComposeOperate
      ? composeData!.composePictureData!
      : _actionPictureList.isEmpty
          ? null
          : _actionPictureList[current];

  /// update compose 操作
  updateOperateType(OperatingType type) {
    operatingType = type;
  }

  /// update 合成
  updateComposeData(MatrixComposeModel data) {
    _composeData = data;
  }

  addPicture(ActionPicture data) {
    _actionPictureList.add(data);
    notifyListeners();
  }

  /// 当前操作的元素
  int _current = 0;

  int get current => _current;

  updateCurrent(int index) {
    _current = index;
    notifyListeners();
  }

  update() {
    notifyListeners();
  }
}

class OperatingElements extends StatefulWidget {
  const OperatingElements({super.key});

  @override
  OperatingElementsState createState() => OperatingElementsState();
}

class OperatingElementsState extends State<OperatingElements> {
  /// 操作svgIcons
  List<svg.PictureInfo> svgIconList = [];
  var nAngle = 0.0;

  /// 当前操作事件
  CanvasEventType? eventType;

  /// 触摸开始的点的数据
  Offset startPosition = const Offset(0, 0);

  /// 操作数据组合
  OperatingNotifier operatingNotifier = OperatingNotifier();

  @override
  initState() {
    super.initState();
    loadImg();
    loadSvg();
    SystemChrome.setPreferredOrientations(// 使设备横屏显示
        [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
  }

  Future<void> loadImg() async {
    var pgSvg = await rootBundle.loadString(ImgR.imgBgPguinSVG);
    final svg.PictureInfo pictureInfo1 = await svg.vg.loadPicture(
        svg.SvgStringLoader(
          pgSvg,
        ),
        null);
    //初始化对象
    ActionPicture actionPicture =
        ActionPicture.initActionPicture(initImgSvgPicture: pictureInfo1);
    operatingNotifier.addPicture(actionPicture);
  }

  Future<void> loadSvg() async {
    var svgDelete = await rootBundle.loadString(ImgR.imgBgDeleteIcon);
    final svg.PictureInfo pictureInfoDelete = await svg.vg.loadPicture(
        svg.SvgStringLoader(
          svgDelete,
        ),
        null);

    var svgLock = await rootBundle.loadString(ImgR.imgBgLockIcon);
    final svg.PictureInfo pictureInfoLock = await svg.vg.loadPicture(
        svg.SvgStringLoader(
          svgLock,
        ),
        null);

    var svgRotate = await rootBundle.loadString(ImgR.imgBgRotateIcon);
    final svg.PictureInfo pictureInfoRotate = await svg.vg.loadPicture(
        svg.SvgStringLoader(
          svgRotate,
        ),
        null);
    var svgScale = await rootBundle.loadString(ImgR.imgBgScaleIcon);
    final svg.PictureInfo pictureInfoScale = await svg.vg.loadPicture(
        svg.SvgStringLoader(
          svgScale,
        ),
        null);

    var svgUnlock = await rootBundle.loadString(ImgR.imgBgUnlock);
    final svg.PictureInfo pictureInfoUnlock = await svg.vg.loadPicture(
        svg.SvgStringLoader(
          svgUnlock,
        ),
        null);
    svgIconList = [];
    setState(() {
      svgIconList.addAll([
        pictureInfoDelete,
        pictureInfoLock,
        pictureInfoRotate,
        pictureInfoScale,
        pictureInfoUnlock
      ]);
    });
    operatingNotifier.update();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _addBackIcon(
        child: _addListener(
          child: RepaintBoundary(
            child: CustomPaint(
              size: Size(ScreenUI.width, ScreenUI.height),
              painter: OperatingPainter(
                  svgIconList: svgIconList,
                  operatingNotifier: operatingNotifier),
            ),
          ),
        ),
      ),
    );
  }

  Widget _addListener({required Widget child}) {
    return Listener(
      onPointerUp: (details) {
        eventType = null;

        // var currentActionPic = operatingNotifier.currentActionPic;
        // currentActionPic!.updateLastAngle(currentActionPic.angle);
      },
      onPointerDown: (details) {
        var actionPictureList = operatingNotifier.actionPictureList;
        var currentActionPic = operatingNotifier.currentActionPic;
        var currentIndex = operatingNotifier.current;
        var composeData = operatingNotifier.composeData;
        // 获取点击的位置
        final position = details.position;
        startPosition = position;

        // 循环把图片都加上点击事件，判断当前的点击索引
        for (var actionPic in actionPictureList) {
          for (var element in actionPic.rectList) {
            if (element.path != null) {
              if (element.path!.contains(position)) {
                // print(
                //     "循环列表的index：${element.currentIndex}，以及当前的index：${currentIndex}");
                if (element.currentIndex != null &&
                    element.currentIndex != currentIndex) {
                  operatingNotifier.updateCurrent(element.currentIndex!);
                  // 把当前的设置的组件放到最底部
                  // ActionPicture item =
                  //     actionPictureList.removeAt(currentIndex);
                  // actionPictureList.add(item);
                  continue;
                }
              }
            }
          }
        }
        currentActionPic!.saveLastMatrix();

        /// 循环组合元素里面的每一项
        if (operatingNotifier.isComposeOperate) {
          for (var item in actionPictureList) {
            item.saveLastMatrix();
          }
        }

        // 循环矩形点击域 ， 添加点击事件
        for (var element in currentActionPic.rectList) {
          if (element.path != null) {
            if (element.path!.contains(position)) {
              eventType = element.type;
              if (eventType == CanvasEventType.image) {
                print("当前的索引${element.currentIndex}");
                currentIndex = element.currentIndex!;
              } else if (eventType == CanvasEventType.scale) {
              } else if (eventType == CanvasEventType.lock) {
                currentActionPic.isLock = !currentActionPic.isLock;
                operatingNotifier.update();
              } else if (eventType == CanvasEventType.rotate) {
                currentActionPic.updateCenterOffset();
                currentActionPic.updateInitialAngle(details.localPosition);
              } else if (eventType == CanvasEventType.delete) {
                print("删除");
                actionPictureList.removeAt(currentIndex);
                if (actionPictureList.isNotEmpty) {
                  operatingNotifier.updateCurrent(actionPictureList.length - 1);
                }
                operatingNotifier.update();
              }
              break;
            }
          }
        }
      },
      onPointerMove: (details) {
        var actionPictureList = operatingNotifier.actionPictureList;
        var currentActionPic = operatingNotifier.currentActionPic;
        var currentIndex = operatingNotifier.current;
        var composeData = operatingNotifier.composeData;
        // 获取移动的位置
        final position = details.position;
        // 移动开始前的点位减去移动时的点位，计算出偏移量
        final boxPosition = position - startPosition;

        if (eventType == CanvasEventType.image) {
          currentActionPic!.addTranslate(boxPosition);
          if (operatingNotifier.isComposeOperate) {
            for (var item in actionPictureList) {
              item.addTranslate(boxPosition);
            }
          }
          operatingNotifier.update();
        } else if (eventType == CanvasEventType.scale) {
          /// 这个才是矩形整体的旋转角度， lastAngle * (180 / math.pi) 可以计算出当前的角度
          var lastMatrixData = currentActionPic!.getLastMatrixData();

          double currentW =
              currentActionPic.imgSize.width * lastMatrixData.scaleX;
          double currentH =
              currentActionPic.imgSize.height * lastMatrixData.scaleY;

          /// 偏移量校正：把旋转后的偏移量通过负的角度矫正回去，就得到正常的缩放偏移量了
          Offset rotateOffset = currentActionPic.transformOffset(
              boxPosition, -lastMatrixData.rotationAngle);

          // print(
          //     "旋转后坐标：$rotateOffset,获取当前角度${lastMatrixData.rotationAngle * (180 / math.pi)}");
          // print("旋转前坐标：$boxPosition");

          double currentScaleX = (currentW + rotateOffset.dx) / currentW;
          double currentScaleY = (currentH + rotateOffset.dy) / currentH;
          if (currentActionPic.isLock) {
            // 等比
            double equalScale = (currentScaleX + currentScaleY) / 2;
            currentScaleX = equalScale;
            currentScaleY = equalScale;
          }
          currentScaleX = math.max(0.2, currentScaleX);
          currentScaleY = math.max(0.2, currentScaleY);
          // double lastWidth = currentActionPic.imgSize.width * lastScale.width;
          // double lastHeight =
          //     currentActionPic.imgSize.height * lastScale.height;
          //
          // /// 判断最小25的尺寸，不等比的时候，需要计算上一次的宽高比，然后短边乘于宽高比
          // double wProportion = 25;
          // double hProportion = 25;
          // if (lastHeight > lastWidth) {
          //   wProportion = wProportion * (lastWidth / lastHeight);
          // } else if (lastHeight < lastWidth) {
          //   hProportion = hProportion * (lastHeight / lastWidth);
          // }
          //
          // /// 限制最小25px
          // if (lastWidth * currentScaleX < wProportion) {
          //   currentScaleX = wProportion / lastWidth;
          // }
          // if (lastHeight * currentScaleY < hProportion) {
          //   currentScaleY = hProportion / lastHeight;
          // }
          currentActionPic.addScale(currentScaleX, currentScaleY);
          if (operatingNotifier.isComposeOperate) {
            for (var item in actionPictureList) {
              /// 校正缩放的dx跟dy
              var lastItemMatrixData = item.getLastMatrixData();

              /// 当前item的左上角坐标对比 操作框的左上角坐标
              Offset itemTLCompareComposeTL = Offset(
                  lastItemMatrixData.dx - lastMatrixData.dx,
                  lastItemMatrixData.dy - lastMatrixData.dy);

              /// 计算出item缩放后的左上角坐标
              Matrix4 itemScaleMtx = Matrix4.identity()
                ..scale(currentScaleX, currentScaleY);
              vector.Vector3 itemAfterScaleTL = itemScaleMtx.transform3(
                  vector.Vector3(
                      itemTLCompareComposeTL.dx, itemTLCompareComposeTL.dy, 0));
              print("缩放前相对于左上角的坐标：${itemTLCompareComposeTL}");
              print("缩放后相对于左上角的坐标：${itemAfterScaleTL}");

              /// 组合操作框左上角跟缩放后的item左上角坐标差值只适用缩放比例为1的情况，如果缩放之后就不准确了，需要把差值除以上一次的缩放比例，调整回缩放比例为1的差值，就准确了
              Offset fixScaleOffset = Offset(
                  (itemAfterScaleTL.x - itemTLCompareComposeTL.dx) /
                      lastItemMatrixData.scaleX,
                  (itemAfterScaleTL.y - itemTLCompareComposeTL.dy) /
                      lastItemMatrixData.scaleY);

              /// 把修复的偏移量逆角度计算回去
              fixScaleOffset = item.transformOffset(
                  fixScaleOffset, -lastItemMatrixData.rotationAngle);

              /// 问题：1，第一次缩放后正常，后面的缩放坐标都不准确，2，缩放后旋转也有问题
              item.addScale(
                  math.max(0.2, currentScaleX), math.max(0.2, currentScaleY),
                  scaleOffset: fixScaleOffset);
            }
          }

          // matrix4 = lastMatrix4.clone()
          //   ..scale(currentScaleX, currentScaleY);
          operatingNotifier.update();
        } else if (eventType == CanvasEventType.rotate) {
          // print("上一次的角度：${currentActionPic!.lastAngle}");
          // print("初始触摸的角度：${currentActionPic.initialAngle}");
          // 求出初始坐标跟移动坐标后的方位角
          var angle = currentActionPic!.calculateAngle(Offset.zero,
              details.localPosition - currentActionPic.centerOffset);
          var angleValue = angle - currentActionPic.initialAngle;
          print("current Angle ${angleValue}");
          currentActionPic.updateAngle(angleValue);
          currentActionPic.addRotation(angleValue);
          if (operatingNotifier.isComposeOperate) {
            for (var item in actionPictureList) {
              item.updateAngle(angleValue);
              item.addRotation(angleValue,
                  original: currentActionPic.centerOffset);
            }
          }
          operatingNotifier.update();
          // matrix4 = (Matrix4.identity()
          //       ..translate(newCenterOffset.dx, newCenterOffset.dy)
          //       ..rotateZ(angle)
          //       ..translate(-newCenterOffset.dx, -newCenterOffset.dy)) *
          //     lastMatrix4.clone();
          //
        }
      },
      child: child,
    );
  }

  Widget _addBackIcon({required Widget child}) {
    return Stack(
      children: [
        child,
        Positioned(
          top: 30,
          left: 30,
          child: GestureDetector(
            onTap: () {
              Get.back();
            },
            child: Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                  color: Colors.black26,
                  borderRadius: BorderRadius.circular(40)),
              child: const Icon(
                Icons.arrow_back,
                color: Colors.yellowAccent,
                size: 18,
              ),
            ),
          ),
        ),
        Positioned(
          top: 30,
          right: 260,
          child: GestureDetector(
            onTap: () {
              var actionPictureList = operatingNotifier.actionPictureList;
              // var composeData = operatingNotifier.composeData;

              if (actionPictureList.length < 2) {
                AppToast.showText("请添加至2个或以上再操作");
              }
              // 生成两个盒子的矩形，然后把合并操作的id传进去idList，
              // 操作的时候，判断如果是合并操作，循环数组，把两个数组里的矩阵一起计算
              List<double> xList = [];
              List<double> yList = [];
              var composeData = MatrixComposeModel(
                composeIdList: [],
                composePictureData: null,
              );

              for (int i = 0; i < actionPictureList.length; i++) {
                var item = actionPictureList[i];
                List<Offset> offset = item.getCurrentVertex();
                for (Offset item in offset) {
                  xList.add(item.dx);
                  yList.add(item.dy);
                }
                composeData.composeIdList.add(i);
              }
              xList.sort();
              yList.sort();
              print("当前坐标list:${xList},${yList}");
              Size composeSize = Size(
                xList.last - xList.first,
                yList.last - yList.first,
              );
              ActionPicture composePicture = ActionPicture.initActionPicture(
                  initImgSvgPicture: null,
                  initMatrixData: Matrix4DataModel(
                      dx: xList.first,
                      dy: yList.first,
                      scaleX: 1,
                      scaleY: 1.0,
                      skewX: 0.0,
                      skewY: 0.0,
                      rotationAngle: 0.0),
                  initImgSize: composeSize);
              composeData.composePictureData = composePicture;
              operatingNotifier.updateComposeData(composeData);
              operatingNotifier.updateOperateType(OperatingType.compose);
              operatingNotifier.update();
              print("合并操作的盒子：${composeSize}");
              // setState(() {});
            },
            child: Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                  color: Colors.black26,
                  borderRadius: BorderRadius.circular(40)),
              child: const Text('合并2个处理'),
            ),
          ),
        ),
        Positioned(
            top: 30,
            right: 400,
            child: ElevatedButton(
              onPressed: () {
                operatingNotifier.updateOperateType(OperatingType.single);
                operatingNotifier.update();
              },
              child: Text("拆分单个处理"),
            )),
        Positioned(
          top: 30,
          right: 80,
          child: GestureDetector(
            onTap: () async {
              var mySvg = await rootBundle.loadString(ImgR.imgBgMyFill);
              final svg.PictureInfo pictureInfo1 = await svg.vg.loadPicture(
                  svg.SvgStringLoader(
                    mySvg,
                  ),
                  null);
              //初始化对象
              var actionPictureList = operatingNotifier.actionPictureList;
              ActionPicture actionPicture = ActionPicture.initActionPicture(
                  initImgSvgPicture: pictureInfo1,
                  initImgSize: Size(100, 100),
                  initMatrixData: Matrix4DataModel(
                      dx: actionPictureList.length + 1 * 100,
                      dy: 100,
                      scaleX: 1,
                      scaleY: 1,
                      rotationAngle: 0,
                      skewX: 0.0,
                      skewY: 0.0));
              actionPictureList.add(actionPicture);
              operatingNotifier.updateCurrent(actionPictureList.length - 1);
              operatingNotifier.update();
            },
            child: Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                  color: Colors.black26,
                  borderRadius: BorderRadius.circular(40)),
              child: const Text('添加元素'),
            ),
          ),
        ),
      ],
    );
  }
}

class OperatingPainter extends CustomPainter {
  OperatingPainter({
    required this.svgIconList,
    required this.operatingNotifier,
  }) : super(repaint: operatingNotifier);

  final List<svg.PictureInfo> svgIconList;
  final OperatingNotifier operatingNotifier;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    CanvasUtils.drawGrid(canvas, paint, size);
    CanvasUtils.drawCoor(canvas, paint, size);
    final actionPictureList = operatingNotifier.actionPictureList;
    final composeData = operatingNotifier.composeData;
    List.generate(actionPictureList.length, (index) {
      ActionPicture actionPicture = actionPictureList[index];
      // svgIconList = actionPicture.isLock ? iconSvgLockList : iconSvgUnLockList;
      // TODO: implement paint
      actionPicture.rectList.clear();
      Rect imgRect = Rect.fromLTWH(
          0, 0, actionPicture.imgSize.width, actionPicture.imgSize.height);

      canvas.save();
      canvas.transform(actionPicture.matrix4.storage);
      if (actionPicture.imgSvgPicture != null) {
        // 绘制企鹅 svg  尺寸是imgSize
        CanvasUtils.drawResizeSvg(canvas, actionPicture.imgSvgPicture!.picture,
            actionPicture.imgSize, actionPicture.imgSvgPicture!.size,
            color: null);
      }
      canvas.restore();

      // 绘制操作
      drawAction(
          canvas: canvas,
          paint: paint,
          showAction: !operatingNotifier.isComposeOperate
              ? operatingNotifier.current == index
                  ? true
                  : false
              : false,
          actionPicture: actionPicture,
          index: index);
    });
    // print("合成的数据：${composeData}");
    if (operatingNotifier.isComposeOperate) {
      ActionPicture actionPicture = composeData!.composePictureData!;
      // TODO: implement paint
      actionPicture.rectList.clear();

      // 绘制操作
      drawAction(
          canvas: canvas,
          paint: paint,
          showAction: true,
          actionPicture: actionPicture,
          index: 0);
    }
  }

  drawAction({
    required Canvas canvas,
    required Paint paint,
    required bool showAction,
    required ActionPicture actionPicture,
    required int index,
  }) {
    canvas.save();
    // 计算四个顶点的当前位置
    List<Offset> vertex = CanvasUtils.getVertex(
        imgSize: actionPicture.imgSize, matrix: actionPicture.matrix4);

    // 把给点位坐标添加命名
    TransformVertexModel transformVertex = TransformVertexModel(
      topLeft: vertex[0],
      topRight: vertex[1],
      bottomRight: vertex[2],
      bottomLeft: vertex[3],
    );

    // 获取dx，dy的值
    Matrix4DataModel matrix4Data =
        CanvasUtils.matrix4ToData(actionPicture.matrix4);

    // 绘制图片的矩形操作框
    Path imgTapPath = Path()..moveTo(vertex[0].dx, vertex[0].dy); // 移动到第一个顶点
    for (int i = 1; i < vertex.length; i++) {
      imgTapPath.lineTo(vertex[i].dx, vertex[i].dy); // 添加线段
    }
    imgTapPath.close(); // 封闭路径
    //把dx dy 偏移量加回去
    // debugPrint("矩阵变换后的盒子${imgTapPath.getBounds().center}");

    imgTapPath = imgTapPath.shift(Offset(matrix4Data.dx, matrix4Data.dy));
    // 绘制矩形
    paint
      ..color = Colors.orangeAccent
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2.0;
    // canvas.translate(50, 200);
    canvas.drawPath(imgTapPath, paint);

    actionPicture.rectList.add(RectInfoModel(
        currentIndex: index,
        rect: Rect.zero,
        path: imgTapPath,
        type: CanvasEventType.image));

    // 绘制一个不旋转的矩形
    Rect centerToRect = imgTapPath.getBounds();

    canvas.drawRect(centerToRect, paint..color = Colors.purple);

    if (svgIconList.isNotEmpty && showAction) {
      drawActionIcon(
          canvas: canvas,
          paint: paint,
          eventType: CanvasEventType.scale,
          vertex: transformVertex.bottomRight,
          svgIcon: svgIconList[3],
          iconSize: actionPicture.iconSize,
          rectList: actionPicture.rectList,
          matrix4Data: matrix4Data);

      drawActionIcon(
          canvas: canvas,
          paint: paint,
          eventType: CanvasEventType.rotate,
          vertex: transformVertex.topRight,
          svgIcon: svgIconList[2],
          iconSize: actionPicture.iconSize,
          rectList: actionPicture.rectList,
          matrix4Data: matrix4Data);

      drawActionIcon(
          canvas: canvas,
          paint: paint,
          eventType: CanvasEventType.lock,
          vertex: transformVertex.topLeft,
          svgIcon: actionPicture.isLock ? svgIconList[1] : svgIconList[4],
          iconSize: actionPicture.iconSize,
          rectList: actionPicture.rectList,
          matrix4Data: matrix4Data);

      drawActionIcon(
        canvas: canvas,
        paint: paint,
        eventType: CanvasEventType.delete,
        vertex: transformVertex.bottomLeft,
        svgIcon: svgIconList[0],
        iconSize: actionPicture.iconSize,
        rectList: actionPicture.rectList,
        matrix4Data: matrix4Data,
      );
    }

    canvas.restore();
  }

  drawActionIcon({
    required Canvas canvas,
    required Paint paint,
    required CanvasEventType eventType,
    required svg.PictureInfo svgIcon,
    required Offset vertex,
    required Matrix4DataModel matrix4Data,
    required Size iconSize,
    required List<RectInfoModel> rectList,
  }) {
    canvas.save();
    Matrix4 iconRotateMatrix = Matrix4.identity()
      ..rotateZ(matrix4Data.rotationAngle);
    // 绘制右上角缩放的操作按钮
    Path iconPath;
    iconPath = Path()..moveTo(0, 0); // 移动到第一个顶点
    if (eventType == CanvasEventType.scale) {
      iconPath
        ..relativeLineTo(30, 0)
        ..relativeLineTo(0, 30)
        ..relativeLineTo(-30, 0);
    } else if (eventType == CanvasEventType.rotate) {
      iconPath
        ..relativeLineTo(30, 0)
        ..relativeLineTo(0, -30)
        ..relativeLineTo(-30, 0);
    } else if (eventType == CanvasEventType.lock) {
      iconPath
        ..relativeLineTo(-30, 0)
        ..relativeLineTo(0, -30)
        ..relativeLineTo(30, 0);
    } else {
      iconPath
        ..relativeLineTo(-30, 0)
        ..relativeLineTo(0, 30)
        ..relativeLineTo(30, 0);
    }

    iconPath.close(); // 封闭路径

    //旋转icon
    iconPath = iconPath.transform(iconRotateMatrix.storage);
    //把dx dy 偏移量加回去
    iconPath = iconPath
        .shift(Offset(matrix4Data.dx + vertex.dx, matrix4Data.dy + vertex.dy));

    paint
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2.0;

    canvas.drawPath(
        iconPath,
        paint
          ..style = PaintingStyle.fill
          ..color = Colors.black45);

    canvas.translate(iconPath.getBounds().center.dx - iconSize.width / 2 + 5,
        iconPath.getBounds().center.dy - iconSize.height / 2 + 5);
    CanvasUtils.drawResizeSvg(
        canvas, svgIcon.picture, const Size(20, 20), svgIcon.size,
        color: Colors.white);
    rectList
        .add(RectInfoModel(rect: Rect.zero, path: iconPath, type: eventType));
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant OperatingPainter oldDelegate) {
    return oldDelegate.operatingNotifier != operatingNotifier;
  }
}
